<!--
 * @Author: wangshuguang
 * @Date: 2022-04-07 15:21:40
 * @LastEditTime: 2022-04-28 17:24:42
 * @LastEditors: wangshuguang
 * @Description: 插件列表
-->
<template>
	<div class="business-product-center">
		<!-- top -->
		<div class="app-main-content-box top-container">
			<app-main-title title="插件列表" />
			<div class="tab">
				<el-tabs v-model="openFlag" @tab-click="handleTabClick">
					<el-tab-pane label="未开通" name="0" />
					<el-tab-pane label="已开通" name="1" />
				</el-tabs>
			</div>
		</div>

		<div v-loading="loading" class="app-main-content-box content-container">
			<el-row v-if="plugDataList.length > 0" :gutter="30">
				<el-col v-for="(plug, i) in plugDataList" :key="plug.code" :xs="12" :sm="8" :md="8" :lg="8" :xl="6">
					<el-card class="box-card" :body-style="{ padding: 0 }" shadow="hover">
						<div class="product-info">
							<div class="info-icon"><img v-if="plug.icon" :src="fileBaseUrl + plug.icon" alt /></div>
							<div class="info-right">
								<div class="type app-line-one">
									<span>{{ plug.name }}</span>
									<span v-show="plug.status == 3" class="arrearage">(已欠费)</span>
								</div>
								<div class="describe app-line-two">{{ plug.description }}</div>
							</div>
						</div>
						<div class="tags">
							<el-tag v-for="tag of plug.tags" :key="tag" size="small">{{ tag }}</el-tag>
						</div>
						<!-- 未开通菜单 -->
						<div v-if="openFlag == 0" class="btn-group"><el-button type="text" class="btn" @click="openPlug(plug)">开通</el-button></div>
						<!-- 已开通菜单 -->
						<div v-else class="btn-group">
							<el-button type="text" class="btn" @click="menuConfig(plug)">功能设置</el-button>
							<el-button v-if="plug.canClose" type="text" class="btn" @click="closePlug(plug)">关闭</el-button>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<!-- 没有功能 -->
			<div v-if="plugDataList.length === 0 && !loading" class="nothing"><el-empty description="暂无数据" /></div>
		</div>

		<el-dialog :title="openPlugConfig.title" :visible.sync="openPlugVisible" width="50%">
			<PlugCenterSupOpenPlug v-if="openPlugVisible" :plug-data="openPlugConfig.data" @close="openPlugVisible = false" @sucClose="sucClose" />
		</el-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { pluginsList, closePlugin } from '@/api/plugCenter';
import { getBusinessInfo } from '@/api/business';
import PlugCenterSupOpenPlug from './PlugCenterSupOpenPlug';
export default {
	components: { PlugCenterSupOpenPlug },
	data() {
		return {
			// 配置
			openFlag: '0',
			openPlugVisible: false,
			openPlugConfig: {
				title: ''
			},
			// 分页
			pageConfig: {
				total: 0,
				pageNum: 1, // 页数-默认1
				pageSize: 10 // 每页条数-默认10
			},
			tabName: '0', // 0: 未启用, 1:已启用, 2:已关闭
			// 状态
			loading: false,
			// 数据
			plugDataList: []
		};
	},
	computed: {
		...mapGetters(['fileBaseUrl', 'businessInfo'])
	},
	async mounted() {
		await this.initData();
		this.autoOpenModal();
	},
	methods: {
		/**
		 * 获取数据
		 */
		// 获取功能列表
		initData() {
			return new Promise(rel => {
				this.loading = true;
				const obj = {
					pageNum: this.pageConfig.pageNum,
					pageSize: this.pageConfig.pageSize,
					openFlag: this.openFlag,
					businessId: this.businessInfo.id
				};
				pluginsList(obj)
					.then(res => {
						console.log('获取功能列表--', res);
						const { list } = res.data;
						this.plugDataList = list.map(item => {
							return {
								...item,
								tags: item.labels ? item.labels.split(',') : []
							};
						});
						console.log('11111111');
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false;
						rel();
					});
			});
		},
		autoOpenModal() {
			const { type } = this.$route.query;
			if (type == 'openSupPlug') {
				// 自动弹出 开通超级会员插件弹框
				const plug = this.plugDataList.find(plug => plug.code == 'supermember');
				if (plug) this.openPlug(plug);
			}
		},
		/**
		 * 按钮组
		 */
		menuConfig(plug) {
			const { code } = plug;
			switch (code) {
				case 'supermember':
					this.open('MarketingActivitySuperInviter');
					break;
				case 'rfm':
					this.$router.push({ name: 'VipGroup' });
					break;

				default:
					this.$message.warning('暂未支持该插件');
					break;
			}
		},
		// 关闭插件
		closePlug(plug) {
			this.$confirm(`是否确定关闭${plug.name}插件？确定关闭后开通费用将不予退回，重新开通需重新缴纳开通费用?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				closePlugin({
					pluginCode: plug.code
				}).then(res => {
					console.log('res', res);
					this.$message.success('操作成功');
					this.initData();
				});
			});
		},
		sucClose() {
			this.openPlugVisible = false;
			this.initData();
		},
		openPlug(data) {
			// 是否已绑定邮箱
			if (data.code == 'supermember') {
				getBusinessInfo().then(res => {
					this.busInfo = res.data;
					if (!this.busInfo.email) {
						this.$confirm('商户邮箱未设置，请在商家中心补充邮箱', '提示', {
							confirmButtonText: '去补充',
							cancelButtonText: '确定',
							type: 'warning'
						})
							.then(() => {
								this.$router.push({
									name: 'BusinessInfoEdit'
								});
							})
							.catch(() => {});
					} else {
						this.openPlugConfig = {
							title: '开通超级会员',
							data
						};
						this.openPlugVisible = true;
					}
				});
			} else {
				this.openPlugConfig = {
					title: '开通超级会员',
					data
				};
				this.openPlugVisible = true;
			}
		},
		// 切换tab栏
		handleTabClick() {
			this.initData();
		},

		open(name) {
			console.log('路由跳转  name--', name);
			this.$router.push({ name });
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 头部 */
.top-container {
	padding: 24px 30px 0;
	border-radius: 5px;
	background-color: #fff;
}
/* 内容 */
.content-container {
	margin-top: 10px;
}

/* 卡片 */
.box-card {
	margin-bottom: 20px;
}
.tags {
	padding: 0 20px 10px;
	min-height: 34px;
	/deep/.el-tag {
		margin-right: 10px;
	}
}
.product-info {
	display: flex;
	padding-bottom: 10px;
	padding: 20px;

	.info-icon {
		overflow: hidden;
		flex: 0 0 auto;
		width: 100px;
		height: 100px;
		margin-right: 15px;
		border-radius: 50%;
		border: 1px solid #e7e7e7;
	}
	.info-right {
		flex: 1 1 auto;
		.type {
			font-size: 20px;
			margin-top: 25px;
			font-weight: bold;
		}
		.arrearage {
			font-size: 14px;
			color: #ff0000;
		}
		.describe {
			margin-top: 10px;
			font-size: 14px;
			color: $light-font-color;
		}
	}
}

/* 按钮组 */
.btn-group {
	display: flex;
	height: 50px;
	.btn {
		flex: 1;
		padding: 0;
		border-radius: 0;
		margin: 0;
		border-top: 1px solid #e7e7e7;
	}
	.btn + .btn {
		margin-left: 0;
	}
	.btn:not(:last-child) {
		border-right: 1px solid #e7e7e7;
	}
}

/* 无数据 */
.nothing {
	margin: 50px 0;
	text-align: center;
	.tips-img {
		margin: 0 auto;
		width: 307px;
		height: 278px;
	}
	.tips-message {
		height: 50px;
		line-height: 50px;
		font-size: 16px;
	}
}
</style>

<style rel="stylesheet/scss" lang="scss">
/* reset element*/
.business-product-center {
	.el-tabs__header {
		margin-bottom: 1px;
		background-color: #fff;
		border-radius: 0 0 5px 5px;
	}
	.el-tabs__nav-wrap::after {
		background-color: #fff;
	}
	.el-tabs__active-bar {
		height: 4px;
	}
}
</style>
